import React, { Component } from 'react';
import Home from './components/Home';
import About from './components/About';
import { Route,Switch,Redirect}  from 'react-router-dom';
import MyNaviLink from './components/MyNaviLink';

class App extends Component {
    render() {
        return (   
          <div>
          <div className="row">
            <div className="col-xs-offset-2 col-xs-8">
              <div className="page-header"><h2>React Router Demo</h2></div>
            </div>
          </div>
          <div className="row">
         
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/* <a className="list-group-item" href="/about">About</a>
                <a className="list-group-item active"href="/home" aria-current="page">Home</a> */}
                  {/* <NavLink  className="list-group-item" to="/about">About</NavLink>
                  <NavLink className="list-group-item" to="/home">Home</NavLink> */}
                  <MyNaviLink to="/about">About</MyNaviLink>
                  <MyNaviLink to="/home">Home</MyNaviLink>
              </div>
            </div>
            <div className="col-xs-6">
              <div className="panel">
                <div className="panel-body">
                  <div>
                    <h2>Home组件内容</h2>
                    <Switch>
                        <Route path="/about" component={About}/>
                        <Route path="/home" component={Home}/>
                        <Redirect to="/about"/>
                    </Switch>
                  </div>
                </div>
              </div>
            </div>
          
           
          </div>
        </div>
        );
    }
}

export default App;